<template>
  <div class="system-monitoring">
    <el-row :gutter="20">
      <el-col :span="24">
        <collapsible-card title="Health" :defaultCollapsed="true">
          <!-- 使用 json-viewer 组件 -->
          <JsonViewer :value="healthInfo" />
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Info" :defaultCollapsed="true">
          <JsonViewer :value="info" />
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Metrics" :defaultCollapsed="true">
          <JsonViewer :value="metrics" />
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Environment" :defaultCollapsed="true">
          <JsonViewer :value="env" />
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Beans" :defaultCollapsed="true">
          <JsonViewer :value="beans" />
        </collapsible-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from '../plugins/axios'
import CollapsibleCard from './CollapsibleCard.vue'
import JsonViewer from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'

const healthInfo = ref({})
const info = ref({})
const metrics = ref({})
const env = ref({})
const beans = ref({})

const fetchData = async (url, target) => {
  try {
    const response = await axios.get(url)
    target.value = response.data
  } catch (error) {
    console.error(`Failed to fetch ${url}:`, error)
  }
}

onMounted(() => {
  fetchData('/admin/health', healthInfo)
  fetchData('/admin/info', info)
  fetchData('/admin/metrics', metrics)
  fetchData('/admin/env', env)
  fetchData('/admin/beans', beans)
})
</script>